/*
所有构件工具都基于node。js平台运行的~模块化默认采用commitjs
 */
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const autoprefixer = require('autoprefixer');

const path = require("path");

/*设置node环境变量:*/
process.env.NODE_ENV = "production";

module.exports = {
    mode:"development",
    entry:{
        index:path.join(__dirname,"./src/js/index.js"),
        list:path.join(__dirname,"./src/js/list.js"),
    },
    output:{
        path:path.join(__dirname,"dist"),
        filename:"./js/[name].js"
    },
    module:{
        rules:[{
            test:/\.css$/,
            /* 单独提取出css样式，把style-loader 替换成 MiniCssExtractPlugin.loader */
            use:[
                MiniCssExtractPlugin.loader,  /*提取css*/
                "css-loader",
                {
                    loader:'postcss-loader',  /*处理css样式*/
                    options: {
                        plugins:function(){
                            return [autoprefixer('last 5 versions')]
                        }
                    }
                }
            ]
        },{
            test:/\.scss$/,
            use:[
                MiniCssExtractPlugin.loader,  /*提取css*/
                "css-loader",
                {
                    loader:'postcss-loader',  /*处理css样式*/
                    options: {
                        plugins:function(){
                            return [autoprefixer('last 5 versions')]
                        }
                    }
                },
                "sass-loader"
            ]
        },{
            test:/\.(jpg|png|gif)$/,
            loader:[
               'url-loader?limit=1024*10&name=img/[name]-[hash:6].[ext]'
            ]
            // loader:"url-loader",
            // options: {
            //     limit: 8 * 1024,
            //     outputPath:"img"
            // }
        },{
            test:/\.html$/,
            /*用来处理html中 img图片的（负责引入img）  */
            loader:"html-loader"
        },{
            test:/\.(eot|svg|ttf|woff|oft|wpff2)$/,
            loader:[
                'url-loader?name=fonts/[name].[ext]'
            ]
        },{
            test:/\.js$/,
            loader:"babel-loader",
            exclude: path.join(__dirname,"node_modules")
        },{
            test:/\.tpl$/,
            loader:"ejs-loader"
        }]
    },
    plugins:[
        new HtmlWebpackPlugin({
            // minify:{
            //     removeComments:true,   /*去除注释*/
            //     collapseWhitespace:true  /*去除空格*/
            // },
            filename:"index.html",
            template: path.join(__dirname,"src/index.html"),
            title:"首页",
            chunksSortMode: "manual",  /*页面加载脚本的顺序 manual手动*/
            chunks: ['index'], /*页面加载的脚本*/
            excludeChunks: ['node_modules'],  /*忽略文件*/
            hash:true
        }),
        new HtmlWebpackPlugin({
            filename:"list.html",
            template: path.join(__dirname,"src/list.html"),
            title:"列表",
            chunksSortMode: "manual",  /*页面加载脚本的顺序 manual手动*/
            chunks: ['list'], /*页面加载的脚本*/
            excludeChunks: ['node_modules'],  /*忽略文件*/
            hash:true
        }),
        new MiniCssExtractPlugin({
            filename:"css/[name].css"   /*css前面不能加 / */
        })
    ],

    /*
    开发服务器 devServer:用来自动化
    特点：只会在内存中编译打包，不会有任何输出（要打包 直接使用webpack）
    开启devServer指令 npx webpack-dev-server
    * */
    devServer: {
        /* 项目构建后路径 */
        // contentBase:path.join(__dirname,"dist"),
        /* 启动gzip压缩 */
        // compress:true,
        open:true,
        host:"localhost",
        port:9709
    }
};
